<template>
  <div>
    <div v-if="mode === 'edit'">
      <el-input
        v-model="typeName"
        placeholder="请输入查询类型"
        :disabled="!mixEditable"
        clearable
      ></el-input>
      <div style="margin-top: 15px">
        <el-input
          v-model="userName"
          placeholder="请输入查询人姓名"
          :disabled="!mixEditable"
          clearable
        ></el-input>
      </div>
      <div style="margin-top: 15px">
        <el-input
          v-model="idCard"
          placeholder="请输入查询人证件号"
          @input="checkIdCard"
          :disabled="!mixEditable"
          clearable
        ></el-input>
      </div>
      <div class="el-form-item__error" v-if="cardError">证件号格式不正确！</div>
      <div
        v-if="typeName && userName && idCard && !cardError"
        style="margin-top: 10px"
      >
        <div v-if="imgUrl">
          <img :src="imgUrl" width="400" height="400" />
        </div>
        <el-button
          v-if="!queryObtainInfoSuccess && !imgUrl"
          type="primary"
          round
          :disabled="!mixEditable || btnDisabled"
          :loading="btnLoading"
          @click="queryStyleList"
          >{{ btnText }}</el-button
        >
        <div v-if="queryObtainInfoSuccess">
          证照材料信息
          <el-table
            :data="obtainInfo"
            height="250"
            stripe
            border
            style="width: 100%"
          >
            <el-table-column prop="subName" label="姓名" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="subNo" label="证件号" show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="typeName"
              label="类型"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="code"
              label="电子证照编码"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="issueOrgName"
              label="颁发机构"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="makeTime"
              label="颁发日期"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="infoValidityBegin"
              label="有效期开始"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="infoValidityEnd"
              label="有效期结束"
              show-overflow-tooltip
            >
            </el-table-column>
          </el-table>
        </div>
        <!-- <div v-if="showErrorText">
          <span class="error-text">
            {{ showErrorText }}
          </span>
        </div> -->
      </div>
    </div>
    <div v-else>{{ value }}</div>
  </div>
</template>

<script>
import customRequest from "../../mixins/custom-request.js"
import { isEmpty, get } from "lodash";
import axios from "axios";
export default {
  name: "license",
  components: {},
  mixins: [customRequest],
  props: {
    value: {},
    mode: {
      default: "edit", // 编辑模式和 edit， 展示模式 view
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      btnText: "电子证照",
      typeName: "身份证",
      userName: "",
      idCard: "",
      cardError: "",
      imgUrl: null,
      resultTimer: null,
      resultInterval: 60 * 1000,
      btnLoading: false,
      btnDisabled: false,
      queryObtainInfoSuccess: null,
      // showErrorText: null,
      obtainInfo: [],
    };
  },
  watch: {},
  mounted() {},
  computed: {
    mixEditable() {
      return (
        !(this.$attrs.readonly || this.$attrs.disabled) && this.mode === "edit"
      );
    },
  },
  beforeDestroy() {
    this.stopInterval();
  },
  methods: {
    checkIdCard() {
      this.$emit("input", this.idCard);
      let legalTex = /^[1-9](\d{16}|\d{13})[0-9xX]$/;
      let result = legalTex.test(this.idCard);
      if (!result && this.idCard) {
        this.cardError = true;
      } else {
        this.cardError = false;
      }
    },
    stopInterval() {
      clearInterval(this.resultTimer);
      this.resultTimer = null;
    },
    queryObtainInfo(token, queryCode, headers) {
      // this.showErrorText = null;
      this.queryObtainInfoSuccess = null;
      const url = `${this.preurl}api/afc/integration/electronicId/restReqObtainInfo?token=${token}&queryCode=${queryCode}`;
      axios
        .get(url, { headers, data: {} })
        .then((res) => {
          const { data } = res;
          console.log("查询电子证件照信息接口数据:", data);
          this.stopInterval();
          this.btnLoading = false;
          this.imgUrl = null;
          this.queryObtainInfoSuccess = true;
          this.obtainInfo = data;
        })
        .catch((err) => {
          const errMsg = get(err, "response.data.errorCode");
          const errorMessage = errMsg || err.message
          console.log("查询电子证件照信息接口错误:", errorMessage);
          // this.$message.error(errorMessage);
          // this.showErrorText = errorMessage;
        });
    },
    queryStyleList() {
      this.btnLoading = true;
      try {
        const headers = this.header;
        console.log("电子证件照类型查询接口入参:", this.typeName + "--" + this.userName + "--" + this.idCard);
        const url = `${this.preurl}api/afc/integration/electronicId/restReqStyleList?typeName=${this.typeName}&handleSubName=${this.userName}&handleSubNo=${this.idCard}`;
        axios
          .get(url, { headers, data: {} })
          .then((res) => {
            const { data } = res;
            console.log("电子证件照类型查询接口数据:", data);
            const { qrCode, token, typeQueryCode } = data;
            const queryCode = isEmpty(typeQueryCode) ? null : typeQueryCode[0].queryCode;
            const imageType = "jpeg";
            this.imgUrl = `data:image/${imageType};base64,${qrCode}`;
            this.btnDisabled = true;
            if (token && queryCode) {
              this.resultInterval /= 2;
              this.stopInterval();
              this.resultTimer = setInterval(() => {
                setTimeout(this.queryObtainInfo(token, queryCode, headers), 0);
              }, this.resultInterval);
            }
          })
          .catch((err) => {
            this.btnLoading = false;
            console.log("电子证件照类型查询接口错误:", err);
            const message = get(err, "response.data.errorCode");
            this.$message.error(message || err.message);
          });
      } catch (err) {
        this.btnLoading = false;
        console.log("调用过程报错了:", err);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
// .error-text {
//   color: #f56c6c;
// }
</style>